<template>
    <el-drawer v-model="drawerVisible" title="点播预告详情" direction="rtl" size="80%" :with-header="true"
        style="background: #F7F7F7;">
        <div class="main">
            <div class="video">
                <video ref="videoRef" :src="detailData.livePlayUrl || '../assets/123.mp4'" autoplay="false"
                    controls="true" @ended="onEnded" @loadeddata="onLoadedData" @error="onError"></video>
            </div>
            <div class="basic-msg">
                <div>预告基本信息</div>
                <div class="con">
                    <div class="square">
                        <div class="label">直播标题</div>
                        <div class="content">{{ detailData.livestreamTitle || '--' }}</div>
                    </div>
                </div>
                <div class="con">
                    <div class="square">
                        <div class="label">直播封面</div>
                        <div class="content">
                            <img :src="detailData.reservationCover || 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'"
                                alt="">
                        </div>
                    </div>
                </div>
                <div class="con">
                    <div class="square">
                        <div class="label">直播时间</div>
                        <div class="content">{{ formatTime(detailData.livestreamStartTime) || '--' }}</div>
                    </div>
                </div>
                <div class="con">
                    <div class="square">
                        <div class="label">直播介绍</div>
                        <div class="content">{{ detailData.livestreamIntroduce || '--' }}</div>
                    </div>
                </div>
                <div class="con">
                    <div class="square">
                        <div class="label">直播类型</div>
                        <div class="content">{{ getLiveTypeText(detailData.liveType) || '--' }}</div>
                    </div>
                </div>
                <div class="con">
                    <div class="square">
                        <div class="label">视频方向</div>
                        <div class="content">{{ detailData.userName || '--' }}</div>
                    </div>
                </div>

                <div class="con">
                    <div style="justify-content: flex-end;display: flex;">
                        <el-button type="danger" size="small" @click="handleAudit(2)">驳回</el-button>
                        <el-button type="primary" size="small" @click="handleAudit(1)">通过</el-button>
                    </div>
                </div>
            </div>
        </div>
    </el-drawer>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { reject, details } from '../api/live'
import { ElMessage, ElMessageBox } from 'element-plus'

// 定义props接收父组件传递的数据
const props = defineProps({
    visible: {
        type: Boolean,
        default: false
    },
    rowData: {
        type: Object,
        default: () => ({})
    }
})

// 定义emit用于通知父组件drawer状态变化
const emit = defineEmits(['update:visible', 'audit-success'])

// 抽屉可见性状态
const drawerVisible = ref(props.visible)
// 详情数据
const detailData = ref({})

// 直播类型映射
const liveTypeMap = {
    0: '直播',
    1: '录播'
}

// 监听父组件传入的visible变化
watch(() => props.visible, (newVal) => {
    drawerVisible.value = newVal
    if (newVal) {
        fetchDetails()
    }
})

// 监听drawerVisible变化并通知父组件
watch(drawerVisible, (newVal) => {
    emit('update:visible', newVal)
})

// 获取详情
const fetchDetails = async () => {
    try {
        const res = await details(props.rowData.id)
        if (res.success) {
            detailData.value = res.data || {}
        } else {
            ElMessage.error(res.msg || '获取详情失败')
        }
    } catch (e) {
        ElMessage.error('网络异常')
    }
}

// 格式化时间
const formatTime = (timeStr) => {
    if (!timeStr) return '--'
    const date = new Date(timeStr)
    return `${date.getFullYear()}-${padZero(date.getMonth() + 1)}-${padZero(date.getDate())} ${padZero(date.getHours())}:${padZero(date.getMinutes())}`
}

// 补零函数
const padZero = (num) => {
    return num < 10 ? `0${num}` : num
}

// 获取直播类型文本
const getLiveTypeText = (type) => {
    return liveTypeMap[type] || '--'
}

// 审核
async function handleAudit(status) {
    let banReason = ''
    if (status === 2) {
        try {
            const { value } = await ElMessageBox.prompt(
                '请输入驳回原因',
                '驳回',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /\S+/,
                    inputErrorMessage: '驳回原因不能为空'
                }
            )
            banReason = value.trim()
        } catch {
            return
        }
    }

    try {
        const res = await reject({
            livestreamId: props.rowData.id,
            status,
            banReason        // 通过时为空字符串
        })
        if (res.success) {
            ElMessage.success(status === 1 ? '已通过' : '已驳回')
            emit('audit-success', { id: props.rowData.id, status: status === 1 ? '1' : '2' })
            drawerVisible.value = false
        } else {
            ElMessage.error(res.msg || '操作失败')
        }
    } catch (e) {
        ElMessage.error('网络异常')
    }
}

// 监听视频加载完成
const onLoadedData = () => {
    console.log("视频加载完成");
};

// 监听视频播放结束
const onEnded = () => {
    console.log("视频播放结束");
};

// 监听视频加载错误
const onError = () => {
    console.error("视频加载失败");
};

</script>

<style scoped lang="scss">
.main {
    display: flex;
    justify-content: space-between;

    .video {
        width: 45%;
        height: 490px;
        margin-top: -20px;
    }

    video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .basic-msg {
        width: 50%;
        height: auto;
        background: #FFFFFF;
        border-radius: 10px;
        margin-top: -20px;
        padding: 20px;

        .con {
            margin-top: 20px;

            .square {
                display: flex;
                justify-content: space-between;
                border-bottom: 1px solid #EEEEEE;
                padding-bottom: 10px;

                .label {
                    font-weight: 500;
                    font-size: 14px;
                    color: #333333;
                    font-family: PingFang SC, PingFang SC;
                }

                .content {
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 14px;
                    color: #79879E;

                    img {
                        width: 50px;
                        height: 50px;
                    }
                }
            }
        }
    }
}
</style>